{% import './macros/icon.njk' as icon %}
<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orbitcss/css/orbit.min.css"/>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"
            integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"/>
        <link rel="stylesheet" href="/stylesheets/main.css">
    </head>
    <body>
        <div class="grid full-height has-no-col-padding">
            <div class="column is-1 dark-blue-bg">
                <div class="box ">
                    <div class="row header">
                        <div class="container has-text-center">
                            <img class="pd10 is-inline" src="/images/logo.png"/>
                        </div>
                        <div class="has-text-center">
                            <button id="new" class="button is-primary">
                                <span class="icon">{{ icon.svg('plus-circle') }}</span>
                                <span>New</span>
                            </button>
                        </div>
                        <nav class="menu">
                            <h5 class="menu__title has-text-info">LANGUAGES</h5>
                            <ul class="menu__list">
                                {% for language in languages %}
                                    <li class="{% if selected.language === language.code %}is-active{% endif %}">
                                        <a href="/{{ language.code }}" class="has-text-light">{{ language.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="column is-2 full-height has-bg-light">
                <div class="box">
                    <div class="row header">
                        <form id="post" class="border-bottom pd10" method="post">
                            <input type="text" name="id" value="">
                        </form>
                    </div>
                    <div class="row content autoscroll-y">
                        {% for row in rows %}
                            <div id="{{ row.id }}" class="item grid{% if row.id == selected.id %} item-selected{% endif %}">
                                <div class="column is-11">
                                    <div class="is-small-heading">{{ row.title }}</div>
                                    <div>{{ row.tags }}</div>
                                </div>
                                <div class="column is-1">
                                    {% if row.status == 'DRAFT' %}
                                        <div>{{ icon.svg('slash-circle') }}</div>
                                    {% elseif row.status == 'PUBLISHED' %}
                                        <div>{{ icon.svg('check2-circle') }}</div>
                                    {% elseif row.status == 'SYNCHRONIZED' %}
                                        <div>{{ icon.svg('arrow-left-right') }}</div>
                                    {% endif %}
                                    {% if row.translations_count > 1 %}
                                        <div>{{ icon.svg('translate') }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="row footer">
                        <p>footer (fixed height)</p>
                    </div>
                </div>
            </div>
            <div class="column is-9 full-height">
                <div id="main" class="box">
                    {% include "./partial/view.njk" %}
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/javascripts/main.js"></script>
        <script type="text/javascript" src="/javascripts/view.js"></script>
    </body>
</html>